<template>
  <metrics></metrics>
  <a-row class="ip-metrics metrics-btn" :gutter="8">
    <a-col :span="12">
      <a-card title="24小时-热门IP归属地-TOP10" :bordered="false" class="qn-card">
        <div ref="containerCountry" style="height: 300px"></div>
      </a-card>
    </a-col>
    <a-col :span="12">
      <a-card title="24小时-IP风控-TOP10" :bordered="false" class="qn-card">
        <div ref="containerRisk" style="height: 300px"></div> </a-card
    ></a-col>
  </a-row>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue'
import { Chart } from '@antv/g2'
import { type IpMetricsParams } from '@/api/home/model/ip'
import { getCountryStatisticsList, getRiskList } from '@/api/home/ip'
let params: IpMetricsParams = {
  type: 2,
  metrics: 4,
  startTime: '2012-10-10 00:00:00',
  endTime: '2212-10-10 00:00:00'
}
let metricsOptions = reactive({
  optionsCountry: {},
  optionsRisk: {}
})

let chartCountry
let chartRisk
const containerCountry = ref(null)
const containerRisk = ref(null)
onMounted(() => {
  chartCountry = renderBarCountryChart(containerCountry.value)
  chartRisk = renderBarRiskChart(containerRisk.value)
})
async function renderBarCountryChart(container: any) {
  let items = await getCountryStatisticsList(params)
  const chart = new Chart({
    container: container,
    autoFit: true
  })
  chart.coordinate({
    transform: [{ type: 'transpose' }]
  })

  chart.data(items)

  chart
    .interval()
    .encode('x', 'item')
    .encode('y', 'metrics')
    .encode('color', 'item')
    .legend(false)
    .encode('shape', 'funnel')
    .transform({ type: 'symmetryY' })
    .scale('x', { padding: 0 })
    .animate('enter', { type: 'fadeIn' })
    .label({
      text: (d: any) => `${d.item}\n${d.metrics}`,
      position: 'inside',
      transform: [{ type: 'contrastReverse' }]
    })
    .axis(false)
  chart.render()
}
async function renderBarRiskChart(container: any) {
  let items = await getRiskList(params)
  let temps = []
  if (items) {
    for (let i in items) {
      let item = items[i]
      temps.push({
        date: item.date,
        metrics: item.securityAnonymous,
        item: 'Anonymous'
      })
      temps.push({
        date: item.date,
        metrics: item.securityHosting,
        item: 'Hosting'
      })
      temps.push({
        date: item.date,
        metrics: item.securityProxy,
        item: 'Proxy'
      })
      temps.push({
        date: item.date,
        metrics: item.securityTor,
        item: 'Tor'
      })
      temps.push({
        date: item.date,
        metrics: item.securityVpn,
        item: 'Vpn'
      })
    }
  }
  const chart = new Chart({
    container: container,
    autoFit: true
  })
  chart
    .point()
    .data(temps)
    .encode('x', 'date')
    .encode('y', 'item')
    .encode('size', 'metrics')
    .encode('color', 'item')
    .encode('shape', 'point')
    .scale('size', { rangeMax: 35 })
    .legend(false)
    .axis({
      x: {
        title: false,
        labelFormatter: (d: string) => d.substring(5)
      },
      y: { title: false }
    })
    .style({
      stroke: 'black',
      strokeOpacity: 0.1,
      opacity: 0.8,
      lineWidth: 1
    })

  chart.render()
}
</script>
